<template>
  <div>
    <el-dialog v-model="visible" :show-close="false" width="700">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            生成链接
          </h4>
        </div>
      </template>

      <div>
        <el-form :model="formData" label-width="120px" ref="elFormRef">
          <div class="padding">
            <div v-for="item in shoppingDataList" :key="item.id" class="margin-top-sm">
              <div class="flex">
                <div style="width: 80px;">
                  <el-image :src="item.goodsDataOne.head_img[0]"></el-image>
                </div>

                <div class="margin-left-sm" style="flex: 1;">
                  <div class="flex justify-between align-center w-100" style="width: 100%;">
                    <div>{{ item.goods_name }}</div>

                    <el-icon color="red" @click="deleteGoodsRequest(item)">
                      <DeleteFilled />
                    </el-icon>
                  </div>

                  <div style="color: red">原价: ${{ item.one_money }}</div>

                  <div class="flex align-center">
                    <div>
                      <div>设置价格:</div>
                      <el-input-number v-model="item.order_money" :min="0.01" @change="handleChange" />
                    </div>

                    <div class="margin-left">
                      <div>数量:</div>
                      <el-input-number v-model="item.order_number" :min="1" @change="handleChange" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <el-form-item label="uname" prop="goods_img">
            <el-input v-model="formData.uname" placeholder="请输入uname" style="width: 240px;"></el-input>
          </el-form-item>

          <el-form-item label="地址" prop="goods_img">
            <Select placeholder="请选择地址" v-model="formData.addIdId" size="default" class="margin-top-xs" mode="api"
              apiUrl="/api/getUserAddress" label-key="address" value-key="id" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>

          <el-button type="primary" @click="handleSubmit">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, watch, toRaw, onMounted, nextTick, computed } from 'vue'
import { SetUserPlaceOrderApi, getCartListApi, setUserPlaceOrderApi, setCartDelApi } from '@/api/index'
import { ElMessage } from 'element-plus'
import Select from '@/components/admin/Select.vue'
import Upload from '@/components/Upload.vue'
import { Goods } from '@element-plus/icons-vue'

const props = defineProps({
})

const visible = ref(false)

const elFormRef = ref(null)

// 表单数据
const formData = ref({
  uname: '',
  addIdId: ''
})

const resetFormData = () => {
  shoppingDataList.value = []
  formData.value = {
    uname: '',
    addIdId: ''
  }
}

const shoppingDataList = ref([])

// 获取购物车列表数据
const getShoppingDataRequest = () => {
  return new Promise(async (resovle, reject) => {
    try {
      const res = await getCartListApi({})

      shoppingDataList.value = res.data

      resovle()
    } catch (error) {
      reject(error)
    }
  })
}

const open = async (config) => {
  try {
    await getShoppingDataRequest()

    if (!shoppingDataList.value.length) return ElMessage({
        type: 'warning',
        message: '购物车暂无商品,请先添加商品!'
    })

    visible.value = true
  } catch (error) {
    ElMessage({
      type: 'error',
      message: error.msg
    })
  }
}

const close = () => {
  resetFormData()

  visible.value = false
}

const deleteGoodsRequest = async (record) => {
  try {
    const res = await setCartDelApi({ id: record.id })

    shoppingDataList.value = shoppingDataList.value.filter(item => item.id != record.id)

    ElMessage({
      type: 'success',
      message: '删除成功!'
    })
  } catch (error) {
    ElMessage({
      type: 'error',
      message: error.msg
    })
  }
}

const handleSubmit = async () => {
  try {

    let dataList = shoppingDataList.value.map(item => {
      return {
        orderMoney: item.order_money,
        goodsId: item.goods_id,
        moneyId: item.money_id,
        number: item.order_number,
        shopId: item.shop_id,
        uname: formData.value.uname,
        addIdId: formData.value.addIdId,
      }
    })

    let params = {
      message: JSON.stringify(dataList)
    }

    const res = await setUserPlaceOrderApi(params)

    emit('confirm', res)

    close()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: error.msg
    })

    close()
  }
}

// 暴露方法给父组件
defineExpose({
  open
});

const emit = defineEmits(['reload', 'confirm'])

onMounted(() => {
  // open()
})
</script>

<style lang='scss' scoped>
div {
  width: 100%;
}
</style>
